<template>
  <div class="activityPricePage">
    <div class="formSearch">
      <el-button
        type="primary"
        @click="addActivity"
      >新增</el-button>
    </div>
    <el-table
      v-loading="loading.table"
      :data="tableData"
      border
      :header-cell-style="{
        background: '#EEF3FF',
        color: '#333333'
      }"
      tooltip-effect="dark"
      style="width: 100%"
      class="dataTable"
    >
      <el-table-column label="活动名称" width="220">
        <template #default="scope">
          {{ scope.row.composeName }}
        </template>
      </el-table-column>
      <el-table-column prop="time" label="活动时间" show-overflow-tooltip />
      <el-table-column prop="number" label="商品数量" show-overflow-tooltip />
      <el-table-column prop="rules" label="活动规则" show-overflow-tooltip />
      <el-table-column label="活动状态" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.state === 0">未开始</span>
          <span v-if="scope.row.state === 1">进行中</span>
          <span v-if="scope.row.state === 2">已结束</span>
          <span v-if="scope.row.state === 3">已停用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template #default="scope">
          <div class="btnList">
            <!-- <el-button v-if="scope.row.state === 0 || scope.row.state === 3" type="text" @click="editActivity(scope.row.priceId)">编辑</el-button> -->
            <el-button
              type="primary"
              link
              @click="editActivity(scope.row.priceId)"
            >编辑</el-button>
            <!-- <el-button v-if="scope.row.state !== 0" type="text" @click="showData(scope.row.shopGroupWorkId)">数据</el-button> -->
            <el-popconfirm
              v-if="scope.row.state !== 1"
              title="确定删除此活动？"
              @confirm="delPrice(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  type="danger"
                >删除</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              v-if="scope.row.state === 3"
              title="确定启用此活动？"
              @confirm="stopFn(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  type="success"
                >启用</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              v-if="scope.row.state === 1"
              title="确定停止此活动？"
              @confirm="stopFn(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  type="danger"
                >停止</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="page.total"
      style="margin: 12px 0;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 新增活动 -->
    <ActivityPrice ref="activityPriceRef" @reset="reset" />
  </div>
</template>

<script setup>
import { defineComponent, onMounted, reactive, ref } from 'vue'

import ActivityPrice from '@/views/marketing/price/form.vue'
import { getShopId } from '@/utils/auth'
import { getPriceList, priceDelete, priceStart } from '@/api/marketing'

import { useActivityHooks } from '@/views/marketing/hooks/dialogHooks.js'

defineComponent({
  name: ''
})

const activityPriceRef = ref(null)
const {
  addActivity,
  editActivity,
  reset,
} = useActivityHooks({
  ref: activityPriceRef,
  resetCallbck: getAll
})

const loading = reactive({
  table: false
})
let page = reactive({
  page: 1,
  pageSize: 10,
  total: 0
});
let query = reactive({
  shopId: null
});

let tableData = ref([]);

// 初始化查询所有数据
function getAll () {
  loading.table = true
  getPriceList(Object.assign({}, page, query)).then(res => {
    tableData.value = res.data.list
    page.total = res.data.total
  }).finally(() => {
    loading.table = false
  })
}
function handleCurrentChange (val) {
  page.page = val
  getAll()
}
function handleSizeChange (val) {
  page.pageSize = val
  getAll()
}

// 启停活动
function stopFn (row) {
  const state = row.state === 1 ? 3 : 1
  priceStart({ priceId: row.priceId, state: state }).then((res) => {
    if (res.code === '') {
      ElMessage.success(row.state === 1 ? '停止成功' : '启用成功')
      page.page = 1
      getAll()
    } else {
      ElMessage.error(res.message)
    }
  })
}
// 删除活动
function delPrice (data) {
  priceDelete({ priceId: data.priceId }).then((res) => {
    if (res.code === '') {
      ElMessage.success('删除成功')
      page.page = 1
      getAll()
    } else {
      ElMessage.error(res.message)
    }
  })
}

onMounted(() => {
  query.shopId = parseInt(getShopId())
  getAll()
})
</script>

<style lang="scss" scoped>
.activityPricePage {
  padding: 20px;
  margin-top: 20px;
  background-color: #FFFFFF;
  .formSearch {
    margin-bottom: 20px;
  }
}
</style>